<template>
	<view class="ad-list">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<!--轮播图-->
		<template v-if="bannerList.length>0">
			<gyd-swiper :list="bannerList"></gyd-swiper>
		</template>

		<view class="my-income">
			<view class="total">
				<view class="icon">
					<image :src="imgHost+'/static/images/icon/monye.png'" mode="aspectFill"></image>
				</view>
				<view>
					<view class="name">我的收益</view>
					<view class="money">
						{{totalIncome}}
						<text class="unit">元</text>
						<text class="detail"
							@click="pageRoute('/servePages/earn/records?type=' + incomeType)">收益明细></text>
					</view>
				</view>

			</view>
			<view class="tixian" @click="pageRoute('/userPages/wallet/withdraw?money_type=4')">
				<text>去提现</text>
				<u-icon name="arrow-right" color="#ff8404"></u-icon>
			</view>
		</view>

		<view class="struct">看广告 去挣钱</view>
		<view class="list">
			<!-- <view class="item">
					<view class="info">
						<view><text class="title">观看Banner视频获取积分</text> <text class="get-money"></text></view>
						<view class="desc">下载安装软件即可完成任务</view>
					</view>
					<view class="btn" @click="goTask('ad-banner-video')">去挣钱</view>
				</view> -->
			<view class="item">
				<view class="info">
					<view><text class="title">观看激励视频获取积分</text> <text class="get-money"></text></view>
					<view class="desc">观看视频倒计时结束即可完成任务</view>
				</view>
				<view class="btn">
					<ad-rewarded-video adpid="1556185555" :loadnext="true" v-slot:default="{loading, error}"
						@load="onadloadRewarded" @close="onadcloseRewarded" @error="onaderrorRewarded">
						<button class="btn" :disabled="loading" :loading="loading">去挣钱</button>
					</ad-rewarded-video>
				</view>
			</view>
			<!-- <view class="item">
					<view class="info">
						<view><text class="title">观看插屏广告获取积分</text> <text class="get-money"></text></view>
						<view class="desc">下载安装软件即可完成任务</view>
					</view>
					<view class="btn">
						<ad-interstitial adpid="1888132490" :loadnext="true" v-slot:default="{loading, error}"
							@load="onadloadHalf" @close="onadcloseHalf" @error="onaderrorHalf">
							<button class="btn" :disabled="loading" :loading="loading">去挣钱</button>
						</ad-interstitial>
					</view>
				</view>
				<view class="item">
					<view class="info">
						<view><text class="title">观看全屏视频获取积分</text> <text class="get-money"></text></view>
						<view class="desc">下载安装软件即可完成任务</view>
					</view>
					<view class="btn" @click="goTask('ad-fullscreen-video')">去挣钱</view>
				</view> -->
		</view>

		<view class="explant">
			<view class="item" @click="pageRoute('/servePages/earn/records?type=' + incomeType)">
				<view class="leftinfo">
					<view class="icon">
						<image :src="imgHost+'/static/images/icon/mx.png'" mode="aspectFill"></image>
					</view>
					<view class="con">
						<view class="title">收益明细</view>
						<view class="desc">收益明细多少看这里便知</view>
					</view>
				</view>
				<view class="more"><u-icon name="arrow-right" color="#717171"></u-icon></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '广告',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		bannerList: [],
		totalIncome: '0.00',
		incomeType: 3,
		location: {
			province: '定位中...',
			city: '定位中...',
			area: '定位中...',
			town: '定位中...',
			street: '定位中...',
			address: '',
			areaCode: '',
		}, // 定位信息
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		getMyIncome();
		getBanner();
		getPosition();
	}

	function getMyIncome() {
		request.get('water.incomerecords/getMyIncome', {
			type: 'task_income'
		}).then(res => {
			console.log('我的收益', res);
		})
	}

	function getBanner() {
		request.get('content/banner', {
			position_id: 13
		}).then(res => {
			console.log('轮播图', res);
			state.bannerList = res.data;
		})
	}

	function getPosition() {
		// 获取当前经纬度(默认为“云南省昆明市五华区政府大楼”)
		let longitude = cache.get('longitude', false) || '102.713685';
		let latitude = cache.get('latitude', false) || '25.049873';
		console.log('当前坐标', longitude, latitude);
		request.get('amap/regeo', {
			longitude: longitude,
			latitude: latitude,
		}).then(res => {
			console.log('地址逆解析', res);
			state.location = res.data;
		});
	}
	// 获取收益奖励
	function getRewards() {
		request.get("water.incomerecords/taskRewards", {
			areaCode: state.location.areaCode
		}).then(res => {
			util.showTip(res.msg);
			setTimeout(() => {
				uni.reLaunch({
					url: '/userPages/earn/ad-list'
				})
			}, 1000);
		})
	}

	function onadload(e) {
		console.log("加载广告", e);
	}

	function onadclose(e) {
		console.log("关闭广告", e);
		if (e.detail.isEnded) {
			getRewards();
		}
	}

	function onaderror(e) {
		console.log("加载广告异常", e);
	}

	function onadloadRewarded(e) {
		console.log("加载激励视频", e);
	}

	function onadcloseRewarded(e) {
		console.log("关闭激励视频", e);
		if (e.detail.isEnded) {
			getRewards();
		}
	}

	function onaderrorRewarded(e) {
		console.log("加载激励视频异常", e);
	}

	function onadloadHalf(e) {
		console.log("加载插屏广告", e);
	}

	function onadcloseHalf(e) {
		console.log("关闭插屏广告", e);
		if (e.detail.isEnded) {
			getRewards();
		}
	}

	function onaderrorHalf(e) {
		console.log("加载插屏广告异常", e);
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		bannerList,
		totalIncome,
		incomeType,
		location,
	} = toRefs(state);
</script>

<style lang="scss">
	.ad-list {
		margin: 0 20rpx 20rpx 20rpx;

		.my-income {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fcf5de;
			border-radius: 12rpx;
			margin: 0 0 20rpx;
			padding: 20rpx;

			.total {
				display: flex;
				align-items: center;

				.icon {
					width: 80rpx;
					height: 80rpx;
					margin: 0 10rpx 0 0;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					font-size: 26rpx;
				}

				.money {
					font-size: 38rpx;
					color: #ff8404;
					font-weight: 600;

					.unit {
						margin: 0 0 0 10rpx;
						font-size: 22rpx;
						color: #7c859c;
					}

					.detail {
						margin-left: 20rpx;
						font-size: 26rpx;
						color: #717171;
					}
				}
			}

			.tixian {
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				background: #fff;
				color: #ff8404;
				display: flex;
			}
		}

		.struct {
			font-size: 32rpx;
			line-height: 80rpx;
			color: #222a52;
			font-weight: 600;
		}

		.list {
			background: #fff;
			border-radius: 12rpx;
			padding: 20rpx;

			.item {
				display: flex;
				align-items: center;
				margin: 0 0 24rpx 0;
				padding: 0 0 24rpx 0;
				border-bottom: #f7f7fb solid 1rpx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				.info {
					flex: 1;

					.title {
						font-size: 30rpx;
						color: #222a52;
						font-weight: 600;
					}

					.get-money {
						margin: 0 0 0 20rpx;
						font-size: 26rpx;
						color: #ff8404;
						font-weight: 600;
					}

					.desc {
						margin: 10rpx 0 0 0;
						font-size: 24rpx;
						color: #7c859c;
					}
				}

				.btn {
					width: 160rpx;
					height: 60rpx;
					background: #ff8404;
					line-height: 60rpx;
					text-align: center;
					border-radius: 40rpx;
					font-size: 24rpx;
					color: #fff;
				}
			}
		}

		//收益明细
		.explant {
			.item {
				display: flex;
				align-items: center;
				background: #fff;
				border-radius: 12rpx;
				padding: 10rpx 20rpx;
				margin: 0 0 20rpx 0;

				.leftinfo {
					flex: 1;
					display: flex;
					align-items: center;

					.icon {
						width: 100rpx;
						height: 100rpx;
						margin: 0 20rpx 0 0;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.con {
						.title {
							font-size: 32rpx;
							color: #222a52;
						}

						.desc {
							font-size: 26rpx;
							color: #7c859c;
						}
					}
				}

				.more {}
			}
		}
	}
</style>